<template>
    <Crumb />


    <div class="content">
        <SearchF @seachKey="seachKey" />
        <AddAdmin />

        <el-table :data="TableList" style="width: 100%" border :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column prop="id" label="编号" width="60" align="center" />
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="nickName" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="createTime" label="添加时间">
                <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录">
                <template #default="{ row }">
                    {{ formatDate(row.loginTime) }}
                </template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                        @change="changeStatus(row.id, row.status)" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="handleClick">分配角色</el-button>
                    <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination v-model:currentPage="pageination.currentPage" v-model:page-size="pageination.pageSize"
            :page-sizes="[5, 10, 20, 30, 40]" :small="pageination.small" :disabled="pageination.disabled"
            :background="pageination.background" layout="total, sizes, prev, pager, next, jumper"
            :total="pageination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <EditAdmin :visible="editAdminVisible" :data="editAdminData" @close="closeFn" />
    </div>
</template>

<script setup lang="ts">
// 组件
import Crumb from '@/components/Crumb/index.vue';
import SearchF from '@/components/SearchF/index.vue';
import AddAdmin from "./AddAdmin/index.vue";
// api请求
import * as http from '@/request/api'
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { useTable } from '@/hooks/components/useTable'
import { Ref, ref } from 'vue';
// 组件样式导入
import EditAdmin from './EditAdmin/index.vue'
const keyword = ref('');
let { get,
    seachKey,
    pageination,
    TableList,
    handleSizeChange,
    handleCurrentChange,
} = useTable(http.admin.getAdminListApi, { keyword: keyword.value })




const handleClick = () => {
    console.log('click')
}
function formatDate(date?: string) {
    if (!date) return '';
    return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}
// 改变按钮状态
async function changeStatus(id: number, status: number) {

    let res = await http.admin.getAdminUpdateStatus({
        id, status
    })
    if (res.code !== 200) return
    ElMessage.success(res.message)

}
// 控制弹框显示隐藏的值
let editAdminVisible = ref(false);
let editAdminData = ref({}) as Ref<IAdminListResArr>;
// 点击编辑按钮
function edit(row: IAdminListResArr) {
    editAdminData.value = row;
    editAdminVisible.value = true;
}
// 关闭事件触发的方法
function closeFn() {
    get()
    editAdminVisible.value = false;
}


</script>

<style lang="less" scoped>
.content {
    padding: 20px 15px;
    margin-top: 60px;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

th {
    font-weight: bold;
}

:deep(.el-pagination) {
    justify-content: flex-end;
    align-items: center;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}


.search {
    margin: 30px 0;
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left span {
            padding-left: 15px;
        }
    }

    section {
        padding: 20px 0 10px;
    }
}
</style>
